My final project will be based on the work of Nick Felton, who measured and recorded various aspects of his life and visualized them in "annual reports". My version will be a much smaller scale which is be looking at my food intake over a 4 week period. I will be using various graphing methods to compare different aspects of my food intake, including caloric, fat, carbohydrates and protein intake. These graphs will then be compared to a base line standard of caloric,fat, carbs and protein intake for a person of my height and weight. This will be included in order for me to manage proper food intake for the future
.
http://www.healthynutritionguide.info/nutritionchart.htm
This website provides a standard break down for a large variety of food and gives the nutritional info for 100g of each. This gives me a very clear and quick guide for me to check, although some values need to be mulitpled to divided depending on proportion size. Other foods that are not listed I'll be researching myself.
an example week of my food intake is listed above.
Each proportion is then broken down into the caloric, fat,carb and protein values.
This example only shows a per day intake, but my final visualization will show intake on a per week basis, as well as being compared to a standard weekly intake.
Case Study : England riots: an interactive timeline
The interactive timeline of the events that took place during the england riots over the summer was created by Garry Blight, John Burn-Murdoch, James Ball and Mark McCormick for the popular British news source www.guardian.co.uk. The timeline plots and categorizes events that took place from the initial shooting of Mark Duggan on August 4th to September 1st when the final cases died down. The user is given two methods of navigation through the piece: a large scroll bar at the bottom and a smaller scroll bar on the top left. The timeline has an interesting animated feel to it as the field the events are plotted on acts as a infinite wheel that pushes forward or backwards as the user scrolls. The visualization also acts as a site map to link users to articles written about each event. Overall the visualization is quite successful with only some minor flaws.
As the Guardian is an extremely popular news source, the visualization would be intended for a very wide audience. There is nothing that particular stands out in the piece that ties it to any specific age group or gender. The red, black and grey colour scheme tends to be linked to generic colours associated with anarchy, violence destruction etc.. while the treatment of the typography is quite conservative. This elements all reflect the fact that it comes for a large news corporation trying to reach a large audience (see fig.1).
figure 1
Figure 1
A successful aspect of the piece is a smooth quality and visual appeal of the animation. When scrolling through the timeline there is a great sense of three dimensionality which is caused by the receding lines bending up into space as the user scrolls forward or backward. Also the piece is very responsive. Moving the slider all the way to the front speeds up the animation and pulling it back instantly freezes it in a specific location which helps when trying to navigate to a specific date.Probably the most successful aspect of the visualization is the way it allows the user to access information about the riots. Each event is plotted based on the time and date then sorted into 6 different categories (see fig 2). From a glance the user can tell when someone lit a fire, twitted about the riots or was sentenced in a trail. Where the real power of the visualization comes when once an event is clicked it sends the user to the article that was written about the event. This allows the users to not only gain a better understanding of each event, but the visualization helps them place that article to a specific time in the real world. And because the events link to other articles posted on guardian.co.uk it allows forces the users to spend more time on the guardian website, which could led to them discovering more information about any given topic.
The flaws in the piece come from layout which cause usability issues. For example, the red columns at the bottom have verticle text which on a monitor is very difficult to read (Fig 3) As well the scroll bar at the bottom has an arrow section on it that appears to be pointing to the red columns but it actually has no relation to them. Also, in certain sections where lots of activity takes place some events are placed to close together to select properly. Scrolling forward slightly can fix this problem but it can cause other important related events to scroll off the page. Also when an event is selected a side box appears over the right side of the visualization which covers other points on the visualization. To close the window you must click off and continue. If the box appeared without interfering with the timeline users could more easily jump from event to event. Also, perhaps the most annoying aspect is to view a summary of each event you must hover over the icon rather than clicking it.Clicking the icon once opens a new window where the related article is shown. For most users, clicking an object to open an object is a common convention, personally I found myself instinctively clicking each icon to view the preview of it but instead was sent to an article.
Overall the piece displays data quite effectively. The points are plotted based on the time which is displayed clearly on the left hand side. Where some confusion takes place is the points relation with the red columns at the bottom. The columns display characteristics like "police" , "politics" as well as locations like "England" , " Manchester" etc.. The reasoning behind mixing locations with things like " social media" do not quite make sense and could have be handled in a more organized way. As the colour coating of the points already tells the user if the event was police or court related perhaps include social media and politics into the legend and strictly left the red columns for locations would have solved that problem. Scrolling with the bottom scroll bar tends to scroll too quickly while using the "navigate" scroll bar worked much more successfully.
Overall the visualization works due to its ability to link users to a wide variety of articles in a way that allows them to place each event in a time and place. It also allows users to quickly scan the timeline and get a general sense of the most active days as well the most common occurances throughout the riot.
My final project will be based on the work of Nick Felton, who measured and recorded various aspects of his life and visualized them in "annual reports". My version will be a much smaller scale which is be looking at my food intake over a 4 week period. I will be using various graphing methods to compare different aspects of my food intake, including caloric, fat, carbohydrates and protein intake. These graphs will then be compared to a base line standard of caloric,fat, carbs and protein intake for a person of my height and weight. This will be included in order for me to manage proper food intake for the future
.
http://www.healthynutritionguide.info/nutritionchart.htm
This website provides a standard break down for a large variety of food and gives the nutritional info for 100g of each. This gives me a very clear and quick guide for me to check, although some values need to be mulitpled to divided depending on proportion size. Other foods that are not listed I'll be researching myself.
an example week of my food intake is listed above.
Each proportion is then broken down into the caloric, fat,carb and protein values.
This example only shows a per day intake, but my final visualization will show intake on a per week basis, as well as being compared to a standard weekly intake.
Case Study : England riots: an interactive timeline
http://www.guardian.co.uk/uk/interactive/2011/sep/05/england-riots-timeline-interactive?CMP=twt_gu
The interactive timeline of the events that took place during the england riots over the summer was created by Garry Blight, John Burn-Murdoch, James Ball and Mark McCormick for the popular British news source www.guardian.co.uk. The timeline plots and categorizes events that took place from the initial shooting of Mark Duggan on August 4th to September 1st when the final cases died down. The user is given two methods of navigation through the piece: a large scroll bar at the bottom and a smaller scroll bar on the top left. The timeline has an interesting animated feel to it as the field the events are plotted on acts as a infinite wheel that pushes forward or backwards as the user scrolls. The visualization also acts as a site map to link users to articles written about each event. Overall the visualization is quite successful with only some minor flaws.
As the Guardian is an extremely popular news source, the visualization would be intended for a very wide audience. There is nothing that particular stands out in the piece that ties it to any specific age group or gender. The red, black and grey colour scheme tends to be linked to generic colours associated with anarchy, violence destruction etc.. while the treatment of the typography is quite conservative. This elements all reflect the fact that it comes for a large news corporation trying to reach a large audience (see fig.1).
Figure 1
A successful aspect of the piece is a smooth quality and visual appeal of the animation. When scrolling through the timeline there is a great sense of three dimensionality which is caused by the receding lines bending up into space as the user scrolls forward or backward. Also the piece is very responsive. Moving the slider all the way to the front speeds up the animation and pulling it back instantly freezes it in a specific location which helps when trying to navigate to a specific date.Probably the most successful aspect of the visualization is the way it allows the user to access information about the riots. Each event is plotted based on the time and date then sorted into 6 different categories (see fig 2). From a glance the user can tell when someone lit a fire, twitted about the riots or was sentenced in a trail. Where the real power of the visualization comes when once an event is clicked it sends the user to the article that was written about the event. This allows the users to not only gain a better understanding of each event, but the visualization helps them place that article to a specific time in the real world. And because the events link to other articles posted on guardian.co.uk it allows forces the users to spend more time on the guardian website, which could led to them discovering more information about any given topic.
The flaws in the piece come from layout which cause usability issues. For example, the red columns at the bottom have verticle text which on a monitor is very difficult to read (Fig 3) As well the scroll bar at the bottom has an arrow section on it that appears to be pointing to the red columns but it actually has no relation to them. Also, in certain sections where lots of activity takes place some events are placed to close together to select properly. Scrolling forward slightly can fix this problem but it can cause other important related events to scroll off the page. Also when an event is selected a side box appears over the right side of the visualization which covers other points on the visualization. To close the window you must click off and continue. If the box appeared without interfering with the timeline users could more easily jump from event to event. Also, perhaps the most annoying aspect is to view a summary of each event you must hover over the icon rather than clicking it.Clicking the icon once opens a new window where the related article is shown. For most users, clicking an object to open an object is a common convention, personally I found myself instinctively clicking each icon to view the preview of it but instead was sent to an article.
Overall the piece displays data quite effectively. The points are plotted based on the time which is displayed clearly on the left hand side. Where some confusion takes place is the points relation with the red columns at the bottom. The columns display characteristics like "police" , "politics" as well as locations like "England" , " Manchester" etc.. The reasoning behind mixing locations with things like " social media" do not quite make sense and could have be handled in a more organized way. As the colour coating of the points already tells the user if the event was police or court related perhaps include social media and politics into the legend and strictly left the red columns for locations would have solved that problem. Scrolling with the bottom scroll bar tends to scroll too quickly while using the "navigate" scroll bar worked much more successfully.
Overall the visualization works due to its ability to link users to a wide variety of articles in a way that allows them to place each event in a time and place. It also allows users to quickly scan the timeline and get a general sense of the most active days as well the most common occurances throughout the riot.
source:
http://www.guardian.co.uk/uk/interactive/2011/sep/05/england-riots-timeline-interactive?CMP=twt_gu